<template>
  <div class="ymdiv">
    <el-button class="czbutton" type="primary" @click="$router.push({ name: 'addarrangespecial' })">安排专题</el-button>
    <div class="divinput"><el-input v-model="input" placeholder="搜索" /></div>
    <el-button class="dbutton" type="primary" @click="aa()">搜索</el-button>
    <div class="bg">
      <el-scrollbar>
        <el-table :data="tableData" style="width: 100%" :row-style="{ height: '60px' }">
          <el-table-column align="center" type="index" label="序号" width="100" />
          <el-table-column align="center" prop="name" label="专题名称" />
          <el-table-column align="center" prop="state" label="开始时间" />
          <el-table-column align="center" prop="city" label="结束时间" />
          <el-table-column align="center" prop="address" label="添加时间" />
          <el-table-column align="center" prop="zip" label="状态">
            <template #default>
              <el-tag class="ml-2 tabletag" type="success">发布</el-tag>
              <el-tag class="ml-2 tabletag" type="danger">禁用</el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" label="操作" width="200">
            <template #default>
              <el-button type="primary" class="tablebutton" @click="details()" size="small">详情</el-button>
              <el-button type="warning" class="tablebutton" size="small">禁用</el-button>
              <el-button type="danger" class="tablebutton" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="paging" background layout="prev, pager, next" :total="1000" />
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from '@vue/reactivity';
import { useRouter } from 'vue-router';
export default {
  setup() {
    const $router = useRouter();
    const data = reactive({
      input: null,
      radio: 0,
      tableData: [
        {
          date: '2016-05-03',
          name: 'Tom',
          state: '2022-5-10 12:00:00',
          city: '2022-5-12 12:00:00',
          address: '2022-5-8 12:00:00',
          zip: 'CA 90036',
          tag: 'Home',
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          state: '2022-5-10 12:00:00',
          city: '2022-5-12 12:00:00',
          address: '2022-5-8 12:00:00',
          zip: 'CA 90036',
          tag: 'Office',
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          state: '2022-5-10 12:00:00',
          city: '2022-5-12 12:00:00',
          address: '2022-5-8 12:00:00',
          zip: 'CA 90036',
          tag: 'Home',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          state: '2022-5-10 12:00:00',
          city: '2022-5-12 12:00:00',
          address: '2022-5-8 12:00:00',
          zip: 'CA 90036',
          tag: 'Office',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          state: '2022-5-10 12:00:00',
          city: '2022-5-12 12:00:00',
          address: '2022-5-8 12:00:00',
          zip: 'CA 90036',
          tag: 'Office',
        },
      ],
    });

    const aa = () => {
      console.log(data.input);
    };
    const details = (res) => {
      $router.push({ name: 'detailsarrangespecial', params: { id: res } });
    };
    return {
      ...toRefs(data),
      aa,
      details,
    };
  },
};
</script>
<style scoped>
.divinput {
  margin-left: 290px;
  margin-top: 10px;
  display: inline-block;
  width: 250px;
}
.dbutton {
  margin-left: 5px;
  margin-right: 203px;
}
.czbutton {
  float: left;
  margin: 10px;
  margin-right: 50px;
}
.bg {
  margin: 10px;
  background-color: rgb(255, 255, 255);
  width: 98%;
  height: 88%;
  overflow-x: hidden;
  border-radius: 5px;
}

.paging {
  margin-left: 400px;
  margin-top: 25px;
}
.tablebutton {
  width: 50px;
}
.tabletag {
  margin-left: 5px;
}
</style>
